import React, { memo, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { ArtistDetailWrapper, LeftWrapper, RightWrapper } from './style'
import ArtistInfo from '../artist-info'
import HotArtist from '../hot-artist'
import {
  getArtistListAction,
  getArtistDetailAction,
  getArtistSongsAction,
  getArtistAlbumsAction,
  getArtistMvsAction,
  getArtistIntroAction
} from '../../store/actionCreators'
export default memo(function ArtistDetail() {
  const {id} = useParams()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getArtistListAction())
    dispatch(getArtistDetailAction(id))
    dispatch(getArtistSongsAction(id))
    dispatch(getArtistAlbumsAction(id,0))
    dispatch(getArtistMvsAction(id,0))
    dispatch(getArtistIntroAction(id))
  },[dispatch,id])

  return (
    <ArtistDetailWrapper className="wrap-v2">
      <LeftWrapper>
        <ArtistInfo/>
      </LeftWrapper>
      <RightWrapper>
       <HotArtist/>
      </RightWrapper>
    </ArtistDetailWrapper>
  )
})
